import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../services/screenAdapter.dart';
import '../controllers/search_controller.dart';

class SearchView extends GetView<ShopSearchController> {
  const SearchView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(246, 246, 246, 1),
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(840),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromRGBO(246, 246, 246, 1),
            borderRadius: BorderRadius.circular(30),
          ),
          child: TextField(
            autofocus: true, //自动获取焦点
            style: TextStyle(fontSize: ScreenAdapter.fontSize(36)), //设置边框字体
            decoration: const InputDecoration(
                contentPadding: EdgeInsets.all(0), //配置框框里面的padding 值
                // labelText: "用户名",
                hintText: "搜索",
                prefixIcon: Icon(Icons.search, color: Colors.black54),
                border: OutlineInputBorder(
                  borderSide: BorderSide.none,
                  // borderRadius: BorderRadius.circular(30),
                )),
            onChanged: (value) {
              controller.keywords = value;
            },
            onSubmitted: (value) {
              //监听键盘事件 -》跳转
              // Get.toNamed("/product-list", arguments: {"keywords": value});
              //替换路由
              Get.offAndToNamed("/product-list",
                  arguments: {"keywords": value});
            },
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        actions: [
          TextButton(
              onPressed: () {
                /*Get.toNamed("/product-list",
                    arguments: {"keywords": controller.keywords});*/
                Get.offAndToNamed("/product-list",
                    arguments: {"keywords": controller.keywords});
                //搜索的时候，存储一份搜索的内容到sp 里面
                controller.setHistoryData(controller.keywords);
              },
              child: Text(
                '搜索',
                style: TextStyle(
                    color: Colors.black54,
                    fontSize: ScreenAdapter.fontSize(36)),
              ))
        ],
        elevation: 0,
      ),
      body: Center(
        child: ListView(
          padding: EdgeInsets.all(20),
          scrollDirection: Axis.vertical,
          children: [
            // controller.historyList.isNotEmpty

            Obx(() => Container(
                  child: controller.historyList.isNotEmpty
                      ? Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text("搜索历史"),
                                IconButton(
                                    onPressed: () {
                                      Get.bottomSheet(Container(
                                        padding: EdgeInsets.all(
                                            ScreenAdapter.width(20)),
                                        // color: Colors.white,
                                        width: ScreenAdapter.width(1080),
                                        height: ScreenAdapter.height(360),
                                        decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius: BorderRadius.vertical(
                                              top: Radius.circular(
                                                  10)), // 设置顶部圆角
                                        ),
                                        child: Column(
                                          children: [
                                            Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                Text(
                                                  "您确定要清空历史记录吗?",
                                                  style: TextStyle(
                                                      fontSize: ScreenAdapter
                                                          .fontSize(48)),
                                                )
                                              ],
                                            ),
                                            SizedBox(
                                                height:
                                                    ScreenAdapter.height(40)),
                                            Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.spaceAround,
                                              children: [
                                                SizedBox(
                                                  width:
                                                      ScreenAdapter.width(420),
                                                  child: ElevatedButton(
                                                      style: ButtonStyle(
                                                          backgroundColor:
                                                              MaterialStateProperty
                                                                  .all(Color
                                                                      .fromARGB(
                                                                          123,
                                                                          151,
                                                                          147,
                                                                          147)),
                                                          foregroundColor:
                                                              MaterialStateProperty
                                                                  .all(Colors
                                                                      .white)),
                                                      onPressed: () {
                                                        Get.back();
                                                      },
                                                      child: const Text("取消")),
                                                ),
                                                SizedBox(
                                                    width: ScreenAdapter.width(
                                                        420),
                                                    child: ElevatedButton(
                                                        style: ButtonStyle(
                                                            backgroundColor:
                                                                MaterialStateProperty
                                                                    .all(const Color
                                                                        .fromARGB(
                                                                        123,
                                                                        151,
                                                                        147,
                                                                        147)),
                                                            foregroundColor:
                                                                MaterialStateProperty
                                                                    .all(Colors
                                                                        .red)),
                                                        onPressed: () {
                                                          controller
                                                              .clearHistoryData();
                                                          Get.back();
                                                        },
                                                        child:
                                                            const Text("确定"))),
                                              ],
                                            )
                                          ],
                                        ),
                                      ));
                                    },
                                    icon: const Icon(
                                        Icons.delete_forever_outlined))
                              ],
                            ),
                            Wrap(
                              //随机排列摆放，不根据大小的包裹组件
                              children: controller.historyList
                                  .map((element) => GestureDetector(
                                        onLongPress: () {
                                          Get.defaultDialog(
                                              title: "提示信息!",
                                              //middleText: "您确定要删除吗?",
                                              content: Text("您确定要删除吗?"),
                                              confirm: ElevatedButton(
                                                  onPressed: () {
                                                    print("确定");
                                                    controller
                                                        .removeHistoryData(
                                                            element);
                                                    Get.back();
                                                  },
                                                  child: const Text("确定")),
                                              cancel: ElevatedButton(
                                                  onPressed: () {
                                                    Get.back();
                                                  },
                                                  child: const Text("取消")));
                                        },
                                        child: Container(
                                            //把Container 当做一个一个的item
                                            padding: EdgeInsets.all(
                                                ScreenAdapter.height(20)),
                                            margin: EdgeInsets.all(
                                                ScreenAdapter.height(16)),
                                            decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(10),
                                              color: Colors.white,
                                            ),
                                            child: InkWell(
                                              child: Text(element),
                                              onTap: () {
                                                Get.find<ShopSearchController>()
                                                    .showDeleteConfirmDialog(
                                                        context,
                                                        'example-item-id');
                                              },
                                            )),
                                      ))
                                  .toList(),
                            ),
                          ],
                        )
                      : Text(""),
                )),

            SizedBox(height: ScreenAdapter.height(20)),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text("猜你想搜"), Icon(Icons.refresh_sharp)],
            ),
            Wrap(
              //随机排列摆放，不根据大小的包裹组件
              children: [
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('电脑'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('苹果手机'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('水杯'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('鼠标'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('机器人'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('书包'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('沙发'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('水果'),
                ),
                Container(
                  //把Container 当做一个一个的item
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  margin: EdgeInsets.all(ScreenAdapter.height(16)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Text('书记'),
                ),
              ],
            ),
            SizedBox(height: ScreenAdapter.height(20)),
            Container(
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(10)),
              child: Column(
                children: [
                  Container(
                      width: double.infinity, //自适应 最大
                      height: ScreenAdapter.height(138),
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              fit: BoxFit.cover,
                              image: AssetImage("assets/images/hot_search.png")
                              //'assets/images/xiaomiBanner2.png',
                              ))),
                  Container(
                      padding: EdgeInsets.all(ScreenAdapter.width(10)),
                      child: GridView.builder(
                          shrinkWrap:
                              true, //收缩属性的配置: GridView 是在ListView 里面，都是没有高度的，配置一个shrinkWrap,让具备收缩的功能
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisSpacing:
                                      ScreenAdapter.width(40), //水平子 Widget 之间间距
                                  mainAxisSpacing:
                                      ScreenAdapter.width(30), //垂直子 Widget 之间间距
                                  crossAxisCount: 2, //一行的 Widget 数量
                                  childAspectRatio: 3 / 1 //宽高比 3/1
                                  ),
                          itemBuilder: (BuildContext context, int i) {
                            return Row(
                              children: [
                                Container(
                                  width: ScreenAdapter.width(120), //自适应 最大
                                  padding:
                                      EdgeInsets.all(ScreenAdapter.width(10)),
                                  child: Image.network(
                                      "https://www.itying.com/images/shouji.png"),
                                ),
                                Expanded(
                                    child: Container(
                                  padding:
                                      EdgeInsets.all(ScreenAdapter.width(10)),
                                  child: Text("小米净化器 热水器  小米净化器"),
                                ))
                              ],
                            );
                          },
                          itemCount: 10))
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
